<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="12">
        <div class="grid-content small">
          <div class="small_top">
            <p>交易情况</p>
            <ul>
              <li @click="tradingNum(1)" :class="[isActive==1?'liColor':'' ]">今日</li>
              <li @click="tradingNum(2)" :class="[isActive===2?'liColor':'' ]">7日</li>
              <li @click="tradingNum(3)" :class="[isActive===3?'liColor':'' ]">30日</li>
            </ul>
          </div>
          <br><br>
          <div class="small_content">

            <div v-for="item in tradingArrData" :key="item.index">
              <p class="text">{{item.text}}</p>
              <p class="num">{{item.num}}</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content small">
          <div class="small_top">
            <p>交易情况</p>
            <ul>
              <li @click="tradingNum(1)" :class="[isActive==1?'liColor':'' ]">今日</li>
              <li @click="tradingNum(2)" :class="[isActive===2?'liColor':'' ]">7日</li>
              <li @click="tradingNum(3)" :class="[isActive===3?'liColor':'' ]">30日</li>
            </ul>
          </div>
          <br><br>
          <div class="small_content">

            <div v-for="item in tradingArrData" :key="item.index">
              <p class="text">{{item.text}}</p>
              <p class="num">{{item.num}}</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <div class="grid-content big" id="main">
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content big" id="main4"></div>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <div class="grid-content big" id="main2">
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content big" id="main3"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'Welcome',
  data () {
    return {
      isActive: 1,
      tradingArrData: [],
      // 格式一
      text: ['支付订单', '支付金额', '结算'],
      num: [11111.0, 222222.0, 3123, 4, 5, 6, 7, 8, 9],
    };
  },
  computed: {

  },
  methods: {
    dealTradingArrData (num) {
      let a = num;
      let start = (a - 1) * 3
      let end = start + 3
      let j = 0
      let arr = []
      for (let i = start; i < end; i++) {
        let obj = {}
        obj.text = this.text[j++];
        obj.num = this.num[i]
        arr.push(obj)
      }
      this.tradingArrData = arr
    },
    draw2 () {
      var myChart = echarts.init(document.getElementById('main2'));
      let option = {
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 23, 19],
            type: 'line',
            areaStyle: {}
          },
          {
            data: [25, 14, 23, 35, 10],
            type: 'line',
            areaStyle: {
              color: '#ff0',
              opacity: 0.5
            }
          }
        ]
      };
      myChart.setOption(option)
    },
    draw3 () {
      var myChart = echarts.init(document.getElementById('main3'));
      let option = {
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 100,
                name: 'A'
              },
              {
                value: 200,
                name: 'B'
              },
              {
                value: 300,
                name: 'C'
              },
              {
                value: 400,
                name: 'D'
              },
              {
                value: 500,
                name: 'E'
              }
            ],
            roseType: 'area'
          }
        ]
      };
      myChart.setOption(option)
    }, draw4 () {
      var myChart = echarts.init(document.getElementById('main4'));
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Step Start',
            type: 'line',
            step: 'start',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Step Middle',
            type: 'line',
            step: 'middle',
            data: [220, 282, 201, 234, 290, 430, 410]
          },
          {
            name: 'Step End',
            type: 'line',
            step: 'end',
            data: [450, 432, 401, 454, 590, 530, 510]
          }
        ]
      };
      myChart.setOption(option)
    },
    tradingNum (num) {
      this.isActive = num
      // 格式二
      // let start = (num - 1) * 3
      // this.tradingArrData = this.tradingArr.slice(start, start + 3)
      // 格式一
      this.dealTradingArrData(num)
    },

    draw (arr1, arr2, arr3) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: '用户分布情况'
        },
        legend: {
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: arr1,
        },
        series: [
          {
            name: 'man',
            data: arr2,
            type: 'bar',
            stack: 'sex'
          },
          {
            name: 'women',
            data: arr3,
            type: 'bar',
            stack: 'sex'
          }
        ]
      };
      // 绘制图表
      myChart.setOption(option)
    }
  },
  mounted () {
    // 格式二
    // this.tradingArrData = this.tradingArr.slice(0, 3)
    // 格式一
    this.dealTradingArrData(1)
    let arr1 = ['广东', '北京', '上海', '杭州', '四川']
    let arr2 = [10, 22, 28, 43, 49]
    let arr3 = [5, 4, 3, 5, 10]
    this.draw(arr1, arr2, arr3)
    this.draw2()
    this.draw3()
    this.draw4()
  },
  computed: {},
  watch: {},
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  border: 1px solid rgb(215, 215, 215);
  // background-color: aqua;
}
.small {
  & {
    padding: 0 20px;
  }
  .small_top {
    & {
      overflow: hidden;
    }
    p {
      float: left;
      font-weight: bold;
    }
    ul {
      float: right;
      li {
        list-style: none;
        width: 50px;
        float: left;
      }
      .liColor {
        color: rgb(199, 138, 255);
      }
      li:hover {
        color: rgb(199, 138, 255);
        cursor: pointer;
      }
    }
  }
  .small_content {
    & {
      height: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 20px;
    }
    div {
      .text {
        margin-top: 0px;
        font-size: 1rem;
        color: rgb(185, 178, 180);
        text-align: center;
      }
      .num {
        margin-top: 1px;
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}
.big {
  min-height: 300px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
